<template>
	<view class="box-wp">
		<view class="goods-main-img">
			<image v-if="goodsInfo.pic" mode="widthFix" class="main-img" :src="goodsInfo.pic">
			</image>
			<view class="goods-info">
				<view class="title">
					{{goodsInfo.prodName||''}}
				</view>
				<view class="price-wp">
					{{goodsInfo.price||''}}
				</view>
			</view>
			<view class="padding-bar">
			</view>
		</view>
		<view class="goods-main-info">
			<view class="sell">
				<view class="avatar">
					<u--image shape="circle" v-if="goodsInfo.shopHead" :src="goodsInfo.shopHead" width="64rpx"
						height="64rpx"></u--image>
				</view>
				<view class="sell-name">
					{{goodsInfo.shopUser||''}}
				</view>
			</view>
			<view class="info">
				<view class="title1">商品单位</view>
				<view class="title2">
					{{goodsInfo.units||''}}
				</view>
			</view>
			<view class="info">
				<view class="title1">商品简介</view>
				<text class="title2" space="nbsp">
					{{goodsInfo.brief?goodsInfo.brief:''}}
				</text>
			</view>
		</view>
		<view class="goods-detail" v-if="gooodsDetailImg.length>0">
			<view class="title">
				商品详情
			</view>
			<view class="imgs" v-for="item in  gooodsDetailImg" :key="item.url">
				<image :src="item.url" style="width: 750rpx;" mode="widthFix"></image>
			</view>
		</view>
		<view class="btn-box">
			<u-button @click="showShareDlg=true" :custom-style="{
			  background: '#276aee',
			  color: '#fff',
			  width: '682rpx',
			  border:'none'
			}">分享赠送</u-button>
		</view>
		<u-modal @close="showShareDlg=false" title="分享给好友" :show="showShareDlg" :zoom="true" width="700rpx"
			:closeOnClickOverlay="true" :showConfirmButton="false">
			<view class="popup-wp">
				<view class="sharecanvas-wp">
					<u--image :src="goodsInfo.pic" mode="widthFix" width="400rpx" height="400rpx"></u--image>
				</view>
				<view class="num-wp2">
					<view class="num">
						数量
					</view>
					<u-number-box buttonSize="50" integer v-model="shareNum" :min="1" :max="100"></u-number-box>
				</view>
				<view class="flex_center_start" style="width:100%;margin-top: 40rpx;">
					<u-button openType="share" :custom-style="{
					  background: '#276aee',
					  color: '#fff',
					  width: '600rpx',
					  border:'none',
					  maring:'0 auto'
					}">立即分享</u-button>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				goodsId: '',
				goodsInfo: {
					prodName: '商品名',
					pic: '',
					price: '10000',
					units: '个',
					shopHead: '',
					brief: '商品简介'
				},
				gooodsDetailImg: [],
				showShareDlg: false,
				shareNum: 1,
				shareImg: '',
				orderInfo: {}, //
			};
		},
		onLoad(opt) {
			uni.showLoading({
				title: 'loading',
				mask: true
			})
			if (opt.id) {
				this.goodsId = opt.id
				this.getGoodsInfo()
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},

		methods: {
			async getGoodsInfo() {

				let res = await this.$api.getProdShopDetail({
					id: this.goodsId,
					pageNo: 1,
					pageSize: 10,
					status: 1,
				})
				if (res.success && res.result) {
					console.log(res.result);
					this.goodsInfo = res.result.records[0]
					let fileListImgs = []
					if (this.goodsInfo.images && this.goodsInfo.images.length > 0) {
						if (this.goodsInfo.images.indexOf(',') == -1) {
							fileListImgs.splice(0, 1, this.goodsInfo.images)
						} else {
							fileListImgs = this.goodsInfo.images.split(',')
						}
						this.gooodsDetailImg = fileListImgs.map(item => {
							if (item.length > 1) {
								let newItem = {
									url: item,
									filePath: item
								}
								return newItem
							}
						})
					}
				} else {
					this.goodsInfo = {}
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}
				setTimeout(() => {
					uni.hideLoading()
				}, 300)

			},
		},
		onShareAppMessage(e) {
			console.log(e);
			uni.showLoading({

			})
			let that = this
			const promise = new Promise(resolve => {
				let {
					openId,
				} = that.userInfo
				let goodsInfo = Object.assign({}, {
					...that.goodsInfo,
					prodId: that.goodsInfo.id,
				})
				delete goodsInfo.id //fix
				let payload = {
					...goodsInfo,
					shopOpenId: openId,
					num: that.shareNum,
				}
				this.$api.addOrder(payload).then(res => {
					uni.hideLoading()
					this.showShareDlg = false
					if (res.success) {
						console.log(res.result, 'res');
						this.orderInfo = res.result
						resolve({
							title: `${res.result.shopUser?res.result.shopUser:''}赠送给您${res.result.prodName?res.result.prodName:''}`,
							path: '/pagesMall/sharePage/sharePage?orderId=' + res.result.id,
							imageUrl: res.result.pic,
						})
					} else {
						this.showShareDlg = false
						uni.showToast({
							title: '生成分享页面失败,引导进入首页',
							icon: 'none'
						})
					}
				})

			})
			return {
				promise,
				title: `我的拜帖`,
				path: '/pages/card/card',
			}
		},
	}
</script>
<style lang="scss" scoped>
	.popup-wp {
		overflow: auto;

		.sharecanvas-wp {
			display: flex;
			justify-content: center;
			margin: 20rpx 0;
		}

		.num-wp2 {
			height: 80rpx;
			padding: 0 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;

			.num {
				font-size: 28rpx;
				font-weight: 400;
				color: #1D2129;
			}
		}

		.share-box {
			margin: 40rpx auto;
			width: 700rpx;
		}


	}

	.box-wp {
		overflow: hidden;
		padding-bottom: 150rpx;

		.goods-main-img {
			width: 750rpx;

			.main-img {
				width: 750rpx;
			}

			.goods-info {
				margin-top: -10rpx;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				padding: 32rpx;
				z-index: 2;

				.title {
					height: 44rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #1D2129;
					line-height: 45rpx;

				}

				.price-wp {
					margin-top: 20rpx;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 600;
					color: #FF7D00;
					line-height: 50rpx;

				}
			}

			.padding-bar {
				height: 40rpx;
				background-color: #f7f8fa;
			}

		}

		.goods-main-info {
			padding: 32rpx;

			.sell {
				height: 64rpx;
				display: flex;

				.sell-name {
					margin-left: 20rpx;
					height: 60rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 60rpx;
				}
			}

			.info {
				margin-top: 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #4E5969;
				display: flex;

				.title1 {
					width: 180rpx;
				}

				.title2 {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #1D2129;
					line-height: 39rpx;
					word-break: break-word;
				}
			}
		}

		.goods-detail {
			overflow: auto;
			margin-bottom: 230rpx;

			.title {
				text-align: center;
				height: 96rpx;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 96rpx;
				background-color: #f7f8fa;
			}

			.imgs {}
		}

		.btn-box {
			z-index: 999;
			width: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			border: none;
			position: fixed;
			bottom: 20rpx;
			bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
			bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		}
	}
</style>